<template>
<div class="home">
    <img alt="Vue logo" src="@/assets/logo.png">
    <HelloWorld :msg="$t('helloWorld.msg')" />
    <div id="nav">
        <router-link to="/page/index">{{$t('home.linkIndex')}}</router-link> |
        <router-link to="/page/name">{{$t('home.linkName')}}</router-link>
    </div>
    <router-view />
    <a-button type="primary" @click="entryAbout">
        <!-- <router-link to="/page/about">-->
        {{$t('home.linkAbout')}}
        <!-- </router-link> -->
    </a-button>
    <a-icon type="caret-right" />
    <a-date-picker />
    {{$t("msg")}}
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue
} from 'vue-property-decorator';
import HelloWorld from '@/components/page/HelloWorld.vue'; // @ is an alias to /src

@Component({
    components: {
        HelloWorld,
        // SvgIcon
    },
})
export default class Home extends Vue {
    name: string = 'Home';
    public entryAbout(): void {
        this.$router.push('/page/about?fullName=123');
    }
}
</script>
